<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('主板详细')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <script th:src="@{/js/plugins/echarts/echarts.min.js}"></script>

    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-user-edit">

        <h4 class="form-header h4">东财主信息</h4>
        <div class="form-group">
            <label class="col-sm-1 control-label">排：</label>
            <div class="col-sm-1">
                <div class="form-control-static"
                     th:text="${stockMainBoardGeneralMessage.stockMainBoard.dfcfPopularityEaderboardRanking}"></div>
            </div>
            <label class="col-sm-1 control-label">时：</label>
            <div class="col-sm-1">
                <div class="form-control-static"
                     th:text="${#dates.format(stockMainBoardGeneralMessage.stockMainBoard.dfcfPopularityEaderboardTime, 'MM/dd')}"></div>
            </div>
            <label class="col-sm-1 control-label">概：</label>
            <div class="col-sm-1">
                <div class="form-control-static"
                     th:text="${stockMainBoardGeneralMessage.stockMainBoard.dfcfPopularityEaderboardConcept}"></div>
            </div>
            <label class="col-sm-1 control-label">热：</label>
            <div class="col-sm-1">
                <div class="form-control-static"
                     th:text="${stockMainBoardGeneralMessage.stockMainBoard.dfcfPopularityEaderboardHotspot}"></div>
            </div>
            <label class="col-sm-1 control-label">详：</label>
            <div class="col-sm-3">
                <div class="form-control-static"
                     th:text="${stockMainBoardGeneralMessage.stockMainBoard.dfcfPopularityEaderboardHotspotDetail}"></div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-1 control-label">排：</label>
            <div class="col-sm-1">
                <div class="form-control-static"
                     th:text="${stockMainBoardGeneralMessage.StockMainBoardDfcfHotDetail.conceptRanking}"></div>
            </div>
            <label class="col-sm-1 control-label">时：</label>
            <div class="col-sm-1">
                <div class="form-control-static"
                     th:text="${#dates.format(stockMainBoardGeneralMessage.stockMainBoardDfcfHot.dfcfHotTime, 'MM/dd')}"></div>
            </div>
            <label class="col-sm-1 control-label">概：</label>
            <div class="col-sm-1">
                <div class="form-control-static"
                     th:text="${stockMainBoardGeneralMessage.stockMainBoardDfcfHot.conceptName}"></div>
            </div>
            <label class="col-sm-1 control-label">介：</label>
            <div class="col-sm-5">
                <div class="form-control-static"
                     th:text="${stockMainBoardGeneralMessage.stockMainBoardDfcfHot.conceptIntroduction}"></div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-1 control-label">标：</label>
            <div class="col-sm-3">
                <div class="form-control-static"
                     th:text="${stockMainBoardGeneralMessage.stockMainBoardDfcfHot.newsItle}"></div>
            </div>
            <label class="col-sm-1 control-label">概：</label>
            <div class="col-sm-7">
                <div class="form-control-static"
                     th:text="${stockMainBoardGeneralMessage.stockMainBoardDfcfHot.newsSummary}"></div>
            </div>
        </div>
        <h4 class="form-header h4">东财附信息</h4>
        <div class="form-group">
            <label class="col-sm-1 control-label">霸榜天数：</label>
            <div class="col-sm-1">
                <div class="form-control-static"
                     th:text="${stockMainBoardGeneralMessage.stockMainBoardDfcfHot.topRankingDay}"></div>
            </div>

            <label class="col-sm-1 control-label">热概涨幅：</label>
            <div class="col-sm-1">
                <div class="form-control-static"
                     th:text="${stockMainBoardGeneralMessage.StockMainBoardDfcfHotDetail.conceptChange}"></div>
            </div>
            <label class="col-sm-1 control-label">热概流入：</label>
            <div class="col-sm-1">
                <div class="form-control-static"
                     th:text="${stockMainBoardGeneralMessage.StockMainBoardDfcfHotDetail.netInflow}"></div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-1 control-label">上涨数：</label>
            <div class="col-sm-1">
                <div class="form-control-static"
                     th:text="${stockMainBoardGeneralMessage.StockMainBoardDfcfHotDetail.riseAmount}"></div>
            </div>
            <label class="col-sm-1 control-label">横盘数：</label>
            <div class="col-sm-1">
                <div class="form-control-static"
                     th:text="${stockMainBoardGeneralMessage.StockMainBoardDfcfHotDetail.consolidationAmount}"></div>
            </div>
            <label class="col-sm-1 control-label">下跌数：</label>
            <div class="col-sm-1">
                <div class="form-control-static"
                     th:text="${stockMainBoardGeneralMessage.StockMainBoardDfcfHotDetail.fallAmount}"></div>
            </div>
            <label class="col-sm-1 control-label">涨停数：</label>
            <div class="col-sm-1">
                <div class="form-control-static"
                     th:text="${stockMainBoardGeneralMessage.StockMainBoardDfcfHotDetail.limitUpAmount}"></div>
            </div>
            <label class="col-sm-1 control-label">跌停数：</label>
            <div class="col-sm-1">
                <div class="form-control-static"
                     th:text="${stockMainBoardGeneralMessage.StockMainBoardDfcfHotDetail.limitDownAmount}"></div>
            </div>
        </div>


        <div class="form-group">
            <label class="col-sm-1 control-label">入选理由：</label>
            <div class="col-sm-11">
                <div class="form-control-static"
                     th:text="${stockMainBoardGeneralMessage.stockMainBoardDfcfHotRelatedStock.introduction}"></div>
            </div>
        </div>



        <h4 class="form-header h4">同顺主信息</h4>
        <div class="form-group">
            <label class="col-sm-1 control-label">排：</label>
            <div class="col-sm-1">
                <div class="form-control-static"
                     th:text="${stockMainBoardGeneralMessage.stockMainBoard.thsPopularityEaderboardRanking}"></div>
            </div>
            <label class="col-sm-1 control-label">时：</label>
            <div class="col-sm-1">
                <div class="form-control-static"
                     th:text="${#dates.format(stockMainBoardGeneralMessage.stockMainBoard.thsPopularityEaderboardTime, 'MM/dd')}"></div>
            </div>
            <label class="col-sm-1 control-label">概：</label>
            <div class="col-sm-1">
                <div class="form-control-static"
                     th:text="${stockMainBoardGeneralMessage.stockMainBoard.thsPopularityEaderboardConcept}"></div>
            </div>
            <label class="col-sm-1 control-label">热：</label>
            <div class="col-sm-1">
                <div class="form-control-static"
                     th:text="${stockMainBoardGeneralMessage.stockMainBoard.thsPopularityEaderboardHotspot}"></div>
            </div>
            <label class="col-sm-1 control-label">详：</label>
            <div class="col-sm-3">
                <div class="form-control-static"
                     th:text="${stockMainBoardGeneralMessage.stockMainBoard.thsPopularityEaderboardHotspotDetail}"></div>
            </div>
        </div>



        <h4 class="form-header h4">走势图信息</h4>
        <div class="form-group">
            <label class="col-sm-2 control-label">股票走势图：</label>
        </div>
        <div id="main" style="width: 1300px; height: 400px;"></div>
        <th:block th:include="include :: footer"/>
        <th:block th:include="include :: datetimepicker-js"/>
        <script th:inline="javascript">
            var myChart = echarts.init(document.getElementById('main'));
            var id = 106;
            // 发送AJAX请求到后端API获取数据
            // console.log(mainId+11);
            const mainId = [[${mainId}]];
            const formData = new FormData();
            formData.append('mainId', mainId);
            fetch('/system/main/board/three/allStockMainBoardDetail', {
                method: 'POST',
                body: formData
            }).then(response => response.json())
                .then(data => {
                    // 处理数据并更新图表
                    var option = {
                        title: {
                            // text: getTitle(data), // 初始化时调用函数设置标题
                            text: data[0] ? data[0].stockName : '默认标题', // 初始化时调用函数设置标题.get
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            type: 'category',
                            data: data.map(item => item.day)
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: data.map(item => item.stockPrice),
                            type: 'line',
                            smooth: 0,
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                formatter: function (params) {
                                    return params.value; // 显示数值
                                }
                            }
                        }]
                    };
                    myChart.setOption(option);
                })
                .catch(error => console.error('Error loading the data:', error));
        </script>
    </form>
</div>
<th:block th:include="include :: footer"/>
<script type="text/javascript">
    var prefix = ctx + "demo/operate";

    $("#form-user-add").validate({
        onkeyup: false,
        rules: {
            userPhone: {
                isPhone: true
            },
            userEmail: {
                email: true
            },
        },
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/edit", $('#form-user-edit').serialize());
        }
    }
</script>

</body>
</html>
